<template>
    <div class="wel_container">
        <el-row>
            <el-col>
                <p>欢迎用户 <span>{{this.$store.state.loginusername}}</span> 登录使用</p>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-image style="width:10vw" src="https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f605/u1f605_u1f47b.png"></el-image>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-collapse v-model="activeName" accordion class="welcomePage">
                    <el-collapse-item name="1">
                        <template slot="title">
                            <i class="el-icon-question"></i>&nbsp;关于系统 About
                        </template>
                        <div>
                            感谢 黑马程序员 提供的电商后台管理系统教学
                            <el-link
                                type="primary"
                                :underline="false"
                                icon="el-icon-link"
                                href="https://www.bilibili.com/video/BV1x64y1S7S7?p=193&share_source=copy_web"
                                target="_blank"
                            ></el-link>
                        </div>
                        <div>
                            前端基于 Vue2
                            <el-link
                                type="primary"
                                :underline="false"
                                icon="el-icon-link"
                                href="https://cn.vuejs.org/"
                                target="_blank"
                            ></el-link>
                            &nbsp;&nbsp;Element UI
                            <el-link
                                type="primary"
                                :underline="false"
                                icon="el-icon-link"
                                href="https://element.eleme.cn/#/zh-CN"
                                target="_blank"
                            ></el-link>
                            &nbsp;&nbsp;开发
                        </div>
                        <div>
                            涉及其它插件 axios
                            <el-link
                                type="primary"
                                :underline="false"
                                icon="el-icon-link"
                                href="http://www.axios-js.com/"
                                target="_blank"
                            ></el-link>
                            &nbsp;&nbsp;NProgress
                            <el-link
                                type="primary"
                                :underline="false"
                                icon="el-icon-link"
                                href="https://ricostacruz.com/nprogress/"
                                target="_blank"
                            ></el-link>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                        <template slot="title">
                            <i class="el-icon-s-tools"></i>&nbsp;开发日志 Optimization
                        </template>
                        <div>
                            开发源代码-Gitee码云
                            <el-link
                                type="primary"
                                :underline="false"
                                icon="el-icon-link"
                                href="https://gitee.com/fernandowpf/vue_shopwork"
                                target="_blank"
                            ></el-link>
                        </div>
                        <div>
                            尚未解决的bug:<br/>
                            1.商品管理>商品列表>修改商品 中获取原商品属性并可提交修改后的属性参数
                            2.商品管理>商品列表>添加商品 中的商品介绍内容没有使用富文本第三方插件
                            3.商品分类没有使用第三方插件，而是使用Element UI的表格中树形数据实现
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="3">
                        <template slot="title">
                            <i class="el-icon-eleme"></i>&nbsp;联系方式 Contact
                        </template>
                        <div>
                            QQ群
                            <el-link
                                type="primary"
                                :underline="false"
                                icon="el-icon-link"
                                href="https://jq.qq.com/?_wv=1027&k=LfJQVxuv"
                                target="_blank"
                            ></el-link>
                        </div>
                    </el-collapse-item>
                </el-collapse>              
            </el-col>
        </el-row>

        </div>
</template>

<script>
export default({
    name:'homewelcome',
    data(){
        return {
            activeName:'1',
        }
    }
})
</script>

<style lang="less" scoped>
    .wel_container{
        text-align: center;
        font-size:32px;
        font-weight:bold;
        padding: 0px 10px;
        margin:4vh 8vw;
        .welcomePage{
            width:30vw;
            border:solid 2px #1e1e1e;
            border-radius:10px;
            padding:10px;
            margin: 10px auto;
        }
    }
</style>